<!-- 账号与安全页面 -->
<template>
	<view>
		<uni-list-item
			:title="item.name"
			v-for="(item, index) in userList"
			:key="index"
			clickable
			@click="handleEvent(item)"
		>
			<template v-slot:body>
				<text class="slot-box slot-text">{{ item.name }}</text>
			</template>
			<template v-slot:footer>
				<text class="font text-light-muted">{{ item.data }}</text>
				<text class="iconfont icon-bianji1 ml-2 text-light-muted"></text>
			</template>
		</uni-list-item>
	</view>
</template>

<script>
	// 引入 vuex  数据管理工具
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				// 账号与安全 ，列表数据
				userList: [],
			};
		},
		// 计算属性 ----------------------------------------------------
		computed: {
			// 结构赋值
			...mapState({
				// 获取到vuex里 state中的user 用户信息
				user: (state) => state.user,
			}),
		},
		// 生命周期回调 监听应用显示 [应用启动，或从后台进入前台显示时触发] ----
		onShow() {
			// 获取第三方登录  绑定账号接口
			this.__init();
		},
		methods: {
			// 初始化数据，将一下内容 push到 账号与安全,列表数据中
			__init() {
				// 将这些数据 ，push到 账号与安全 列表数据 中
				let list = [
					{
						name: '手机号',
						data: this.user.phone ? this.user.phone : '未绑定',
						type: 'navigateTo',
						url: '/pages/user-model/user-phone/user-phone',
					},
					{
						name: '登录密码',
						data: this.user.password ? '修改密码' : '未设置',
						type: 'navigateTo',
						url: '/pages/user-model/user-password/user-password',
					},
					{
						name: '邮箱绑定',
						data: this.user.email ? this.user.email : '未绑定',
						type: 'navigateTo',
						url: '/pages/user-model/user-email/user-email',
					},
				];
				// console.log(this.user);
				this.userList = [...list];
				// 获取第三方登录  绑定账号接口
				this.$H.get('/user/getuserbind', {}, { token: true }).then((res) => {
					// console.log(res);
					// 调用 vuex中 修改信息方法
					this.$store.commit('editUserInfo', {
						key: 'user_bind', // state.user中的 user_bind 字段
						value: res,
					});
					let other = [
						{
							name: '微信账号',
							type: 'bind',
							provider: 'weixin',
							data: this.user.user_bind.weixin ? this.user.user_bind.weixin.nickname : '未绑定',
						},
						{
							name: '微博账号',
							type: 'bind',
							provider: 'sinaweibo',
							data: this.user.user_bind.sinaweibo ? this.user.user_bind.sinaweibo.nickname : '未绑定',
						},
						{
							name: 'QQ账号',
							type: 'bind',
							provider: 'qq',
							data: this.user.user_bind.qq ? this.user.user_bind.qq.nickname : '未绑定',
						},
					];
					this.userList = [...this.userList, ...other];
				});
			},
			// 跳转 各自 对应的页面
			// 传入每个按钮 的type值
			handleEvent(item) {
				if (item.type === '') return;
				switch (item.type) {
					case 'navigateTo': // list数据列表中，判断的类型
						uni.navigateTo({
							// 跳转连接
							url: item.url,
						});
						break;
					// 判断第三方登录 绑定
					case 'bind':
						if (item.data !== '未绑定') {
							return uni.showToast({
								title: '你已经绑定过了',
								icon: 'none',
							});
						}
						// 调用 绑定 第三方登录
						this.bind(item.provider);
						break;
				}
			},
			// 绑定第三方登录
			bind(provider) {
				// uni官方登录
				uni.login({
					provider: provider, // 授权登录服务商
					// 绑定 登录成功
					success: (res) => {
						// console.log(res);
						//获取用户信息 (官方提供的)
						uni.getUserInfo({
							provider: provider, // 授权登录服务商
							success: (infoRes) => {
								let obj = {
									provider: provider, //第三方登录
									openid: infoRes.userInfo.openId ? infoRes.userInfo.openId : infoRes.userInfo.idstr, //用户id 新浪微博没有openid这里做判断
									nickName: infoRes.userInfo.nickName, // 昵称
									avatarUrl: infoRes.userInfo.avatarUrl, // 头像
								};
								// 调用 登录接口，传入 获取到的参数
								this.$H
									.post('/user/bindother', obj, {
										token: true,
										native: true, // 新浪微博需要，返回原始数据
									})
									.then((result) => {
										if (result.data.errorCode) {
											return uni.showToast({
												title: result.data.msg,
												icon: 'none',
												duration: 3000,
											});
										}
										// 调用 初始化数据
										this.__init();
										uni.showToast({
											title: '绑定成功',
											icon: 'none',
										});
									});
							},
						});
					},
					// 失败
					fail: () => {
						uni.showToast({
							title: '绑定失败',
							icon: 'none',
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #161616;
		margin-right: 10px;
	}
	.uni-input {
		height: 0;
		padding: 0;
		line-height: 20rpx;
	}
</style>
